import React, { useState } from 'react';

const btnStyle: React.CSSProperties = {
  width: 48,
  height: 48,
  borderRadius: '50%',
  background: '#2260ff',
  color: '#fff',
  boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: 28,
  cursor: 'pointer',
};

const menuStyle: React.CSSProperties = {
  background: '#fff',
  borderRadius: 16,
  boxShadow: '0 4px 24px rgba(0,0,0,0.13)',
  padding: '18px 0',
  minWidth: 200,
  display: 'flex',
  flexDirection: 'column',
  gap: 0,
  fontSize: 16,
  color: '#222',
  userSelect: 'none',
};
const menuItemStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 10,
  padding: '12px 28px 12px 24px',
  cursor: 'pointer',
  transition: 'background 0.15s',
};
const menuItemHover: React.CSSProperties = {
  background: '#f1f5ff',
};

const icons = [
  <svg width="20" height="20" fill="none" key="1"><rect x="3" y="3" width="14" height="14" rx="2" stroke="#2260ff" strokeWidth="1.5"/><path d="M7 7h6M7 10h6M7 13h3" stroke="#2260ff" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  <svg width="20" height="20" fill="none" key="2"><circle cx="10" cy="10" r="8" stroke="#2260ff" strokeWidth="1.5"/><path d="M10 7v2.5a1 1 0 0 0 1 1h.5" stroke="#2260ff" strokeWidth="1.5" strokeLinecap="round"/><circle cx="10" cy="14" r="1" fill="#2260ff"/></svg>,
  <svg width="20" height="20" fill="none" key="3"><rect x="3" y="5" width="14" height="10" rx="2" stroke="#2260ff" strokeWidth="1.5"/><path d="M3 7l7 4 7-4" stroke="#2260ff" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
  <svg width="20" height="20" fill="none" key="4"><circle cx="10" cy="10" r="8" stroke="#2260ff" strokeWidth="1.5"/><path d="M7 10h6M10 7v6" stroke="#2260ff" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  <svg width="20" height="20" fill="none" key="5"><rect x="4" y="4" width="12" height="12" rx="2" stroke="#2260ff" strokeWidth="1.5"/><path d="M7 10h6M10 7v6" stroke="#2260ff" strokeWidth="1.5" strokeLinecap="round"/></svg>,
];

const menuList = [
  { label: '新手教程', onClick: () => {} },
  { label: '帮助中心', onClick: () => {} },
  { label: '意见反馈', onClick: () => {} },
  { label: '在线客服', onClick: () => {} },
  { label: '提交模版需求', onClick: () => {} },
];

export default function HelpButton() {
  const [open, setOpen] = useState(false);
  const [hoverIdx, setHoverIdx] = useState(-1);

  // 包裹层高度 = 按钮高度 + 菜单高度 + 间距
  // 这里假设菜单高度最大300px
  return (
    <div
      style={{
        position: 'fixed',
        right: 36,
        bottom: 56,
        zIndex: 9999,
        height: open ? 48 + 8 + 300 : 48,
        width: 220,
        display: 'flex',
        flexDirection: 'column-reverse',
        alignItems: 'flex-end',
        pointerEvents: 'auto',
      }}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <div style={btnStyle} title="帮助">?</div>
      {open && (
        <div
          style={{
            ...menuStyle,
            position: 'static',
            marginBottom: 8,
            marginRight: 45,
          }}
        >
          {menuList.map((item, idx) => (
            <div
              key={item.label}
              style={{ ...menuItemStyle, ...(hoverIdx === idx ? menuItemHover : {}) }}
              onMouseEnter={() => setHoverIdx(idx)}
              onMouseLeave={() => setHoverIdx(-1)}
              onClick={item.onClick}
            >
              {icons[idx]}
              {item.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
} 